<template>
  <div id="app">
    <!-- <login v-if="!hasAuth"></login> -->
    <template>
      <div class="admin-left">
        <a class="logo" href="/#/">
          <span>桃花源小程序</span>
        </a>
        <el-menu
          :default-active="$route.path"
          ref="menu"
          class="el-menu-vertical-demo"
          router
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="item in menuList">
            <el-submenu
              v-if="item.children"
              :key="item.route"
              :index="item.route"
            >
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="sub in item.children"
                  :key="sub.route"
                  :index="sub.route"
                  :route="sub.route"
                  :disabled="sub.disabled"
                >
                  <i :class="sub.icon"></i>
                  <span>{{ sub.name }}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item
              v-else
              :key="item.route"
              :index="item.route"
              :route="item.route"
              :disabled="item.disabled"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="admin-right">
        <div class="header">
          <!-- <span @click="logoutHandle">注销</span> -->
        </div>
        <div class="content">
          <router-view />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
// import Login from '@/components/page/login';

export default {
  name: 'App',
  components: {
    // Login
  },
  data() {
    return {
      menuList: [
        {
          name: '订单管理',
          route: '/flash/order',
          icon: 'el-icon-s-order'
        },
        // {
        //   name: '商品管理',
        //   route: '/flash/goods',
        //   icon: 'el-icon-s-goods'
        // },
        {
          name: '特权卡&杂志',
          route: '/card',
          icon: 'el-icon-postcard',
          children: [
            {
              name: '商品管理',
              route: '/goods',
              icon: 'el-icon-s-goods'
            },
            {
              name: '卡号管理',
              route: '/card/list',
              icon: 'el-icon-setting'
            },
            {
              name: '申请列表',
              route: '/card/apply',
              icon: 'el-icon-tickets'
            }
          ]
        },
        {
          name: '会员体验购',
          route: '/flash',
          icon: 'el-icon-s-promotion',
          children: [
            {
              name: '商品管理',
              route: '/flash/goods',
              icon: 'el-icon-s-goods'
            },
            {
              name: '券码管理',
              route: '/flash/ticket',
              icon: 'el-icon-message'
            }
          ]
        },
        {
          name: '用户管理',
          route: '/user',
          icon: 'el-icon-user'
        }
      ]
    };
  },
  computed: {
    hasAuth() {
      return window.token;
    }
  },
  methods: {
    logoutHandle() {
      localStorage.clear();
      window.location.href = '/';
    }
  }
};
</script>

<style lang="less">
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  width: 100%;
  height: 100%;
  .admin-left {
    width: 200px;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    .logo {
      height: 60px;
      width: 100%;
      background: #333740;
      text-align: center;
      text-decoration: none;
      padding-right: 80px;
      box-sizing: border-box;
      span {
        line-height: 60px;
        color: #ffffff;
        font-size: 18px;
      }
    }
    & > .el-menu {
      flex: 1;
      overflow: auto;
      .el-menu-item-group__title {
        padding: 0;
      }
    }
  }
  .admin-right {
    width: 100%;
    height: 100%;
    margin-left: 200px;
    background: #f0f2f5;
    position: relative;

    .header {
      height: 56px;
      background: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      span {
        float: right;
        margin-right: 230px;
        line-height: 54px;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .content {
      position: absolute;
      top: 60px;
      bottom: 0;
      left: 0;
      right: 200px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 3px;
      overflow: auto;
      // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    }
  }
}
</style>

